<template>
    <view class="yulan">
        <view class="header4">
            <view>
                <u-icon name="arrow-left" color="#2979ff" size="18" @click="icon"></u-icon>
            </view>
            <view>文件详情</view>
            <view><img src="/static/img/sangedian.png" alt="" style="width: 20px;height: 20px;vertical-align: middle;">
            </view>
        </view>
        <view class="content5">
            <view>
                <p style="font-size: 20px;margin-left: 20px;margin-top: 15px;font-weight: bold;color: #666;">合同文件模板</p>
            </view>
            <view>
                <p style="color: #666; font-size: 13px;margin-left: 20px;margin-top: 15px;">XLS·100KB·文件夹名</p>
            </view>
            <view>
                <p style="text-align: center;margin-top: 20px;"><img src="/static/img/pdf1.png" alt=""
                        style="width: 80px; height: 106px;"></p>
                <p style="text-align: center;margin-top: 10px;">
                    <text
                        style="display: block;border-radius: 10px; margin-left: 155px; width: 70px;height: 25px; color: #09f;border: 1px solid #09f;">预览</text>
                </p>
            </view>
            <view style="border: 1px solid #ccc; margin-top: 20px;display: flex; justify-content: space-between;">
                <view style="height: 40px;line-height: 40px;">

                    <view style="margin-left: 15px;">上传人员</view>
                </view>
                <view style="display: flex;">
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;vertical-align: middle;">
                    <p style="margin-left: 0px;margin-top: 10px;margin-right: 10px;">赵小刚</p>
                </view>
            </view>
            <view style="border: 1px solid #ccc; margin-top: 0px;display: flex; justify-content: space-between;">
                <view style="height: 40px;line-height: 40px;">

                    <view style="margin-left: 15px;">文件描述</view>
                </view>
                <view style="display: flex;">

                    <p style="color: #ccc; margin-left: 0px;margin-top: 10px;margin-right: 10px;">添加描述</p>
                </view>
            </view>
            <view style="border: 1px solid #ccc; margin-top: 0px;display: flex; justify-content: space-between;">
                <view style="height: 40px;line-height: 40px;">

                    <view style="margin-left: 15px;">关联业务</view>
                </view>
                <view style="display: flex;">
                    <p style="color: #ccc; margin-left: 0px;margin-top: 10px;margin-right: 10px;">选择关联</p>
                </view>
            </view>
            <view style="border: 1px solid #ccc; margin-top: 0px;display: flex; justify-content: space-between;">
                <view style="height: 40px;line-height: 40px;">

                    <view style="margin-left: 15px;">上传时间</view>
                </view>
                <view style="display: flex;">

                    <p style="margin-left: 0px;margin-top: 10px;margin-right: 10px;">2019-08-22 12:00</p>
                </view>
            </view>
            <view style="border: 1px solid #ccc; margin-top: 0px;display: flex; justify-content: space-between;">
                <view style="height: 40px;line-height: 40px;">

                    <view style="margin-left: 15px;">更新时间</view>
                </view>
                <view style="display: flex;">

                    <p style="margin-left: 0px;margin-top: 10px;margin-right: 10px;">2019-08-22 12:00</p>
                </view>
            </view>
            <view>
                <p
                    style="background-color:rgb(249, 249, 249);  height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; margin-top: 10px;">

                    <img src="/static/img/22.png" alt="" style="width: 20px;height: 20px; vertical-align: middle;">基本信息
                </p>
            </view>
            <li class="display">
                <view>
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;margin-left: 15px;">
                </view>
                <view>
                    <p>周小明 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px;">非常不错的分享，对我们的工作很有参考价值</p>

                </view>

                <view style="text-align: center; display: flex;">
                    <p style="color: #666; font-size: 13px;margin-top: 8px;"><img src="/static/shizhong.png" alt=""
                            style="width: 10px;height: 10px;">22:31</p>
                </view>
            </li>
            <li class="display">
                <view>
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;margin-left: 15px;">
                </view>
                <view>
                    <p>周小明 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px;">非常不错的分享，对我们的工作很有参考价值</p>

                </view>

                <view style="text-align: center; display: flex;">
                    <p style="color: #666; font-size: 13px;margin-top: 8px;"><img src="/static/shizhong.png" alt=""
                            style="width: 10px;height: 10px;">22:31</p>
                </view>
            </li>
            <li class="display">
                <view>
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;margin-left: 15px;">
                </view>
                <view>
                    <p>周小明 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px;">非常不错的分享，对我们的工作很有参考价值</p>

                </view>

                <view style="text-align: center; display: flex;">
                    <p style="color: #666; font-size: 13px;margin-top: 8px;"><img src="/static/shizhong.png" alt=""
                            style="width: 10px;height: 10px;">22:31</p>
                </view>
            </li>
            <li class="display">
                <view>
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;margin-left: 15px;">
                </view>
                <view>
                    <p>周小明 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px;">非常不错的分享，对我们的工作很有参考价值</p>

                </view>

                <view style="text-align: center; display: flex;">
                    <p style="color: #666; font-size: 13px;margin-top: 8px;"><img src="/static/shizhong.png" alt=""
                            style="width: 10px;height: 10px;">22:31</p>
                </view>
            </li>
            <li class="display">
                <view>
                    <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;margin-left: 15px;">
                </view>
                <view>
                    <p>周小明 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px;">非常不错的分享，对我们的工作很有参考价值</p>

                </view>

                <view style="text-align: center; display: flex;">
                    <p style="color: #666; font-size: 13px;margin-top: 8px;"><img src="/static/shizhong.png" alt=""
                            style="width: 10px;height: 10px;">22:31</p>
                </view>
            </li>
        </view>
        <view class="footer6">
            <view>
                <u-popup :show="show" mode="bottom" @close="close" @open="open">
                    <view class="tan" @close="close">
                     <view style="width: 340px; margin-top: 10px;margin-left: 10px;">
                        
                        <u--textarea  placeholder="请输入内容" ></u--textarea>

                        <up-keyboard ref="uKeyboard" mode="car" :show="show" @close="close"></up-keyboard>

                     </view>
                    </view>
                </u-popup>
            </view>
            <view @click="show = true"
                style="width: 360px;height: 30px;border: 1px solid #ccc; border-radius: 20px; margin-left: 8px;">
                <img src="/static/img/bi.png" alt=""
                    style="width: 20px;height: 20px;position: absolute; left: 13px; bottom: -15px;">
                <text style="color: #666;font-size: 13px; margin-left: 30px;">我来说两句</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const icon = () => {
    uni.navigateBack({
        delta: 1
    })
}
const show = ref(false)
const open = () => {
    show.value = true
}
const close = () => {
    show.value = false
}
</script>

<style lang="scss">
.tan{
    height: 400px;
}
.display {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 0 10px #ccc;
    border-radius: 10px;
    width: 360px;
    margin-left: 8px;
    height: 80px;
    line-height: 25px;
    margin-top: 10px;
}

.header4 {
    margin-top: 20px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    border-bottom: 1px solid #ccc;
}

.content5 {
    height: calc(100vh - 20px - 70px);
    overflow: hidden;
    overflow-y: scroll;
}

.footer6 {
    height: 70px;
}
</style>